import React, { memo, useEffect } from 'react';
import { Handle, Position } from '@xyflow/react';
import './style.less'
import styled from 'styled-components'
import { Image, Tooltip } from 'antd';
import { WarningFilled } from '@ant-design/icons';
import { NodeMap } from '@/constant';
import { motion } from 'motion/react'

const Space = styled.div`
display: flex;
align-items: center;
width: 100%;
padding-right: 10px;
.label-text {
  color: #000000a6;
  flex: 1;
  margin: 0 10px;
}
`

export default memo(({ label, type, errMessage }) => {
  return (<>
    <Handle
      type="target"
      position={Position.Left}
    />
    <motion.div initial={{ scale: 0 }} whileInView={{ scale: 1 }}>
      <Space>
        <Image src={NodeMap[type].icon} preview={false} style={{ height: 20, marginLeft: 5 }} />
        <span className='label-text'>{label}</span>
        {
          errMessage ? <Tooltip title={errMessage}>
            <WarningFilled style={{ color: '#ed7c78', fontSize: 18 }} />
          </Tooltip> : null
        }
      </Space>
    </motion.div>
    <Handle
      type="source"
      position={Position.Right}
    />
  </>
  );
});
